import React,{Component} from 'react';
import {Link} from 'react-router-dom';
import $ from 'jquery';
import CanvasDotePage from './CanvasDotePage.js';
import { Input, Icon,Select,Button,Form,Checkbox,message} from 'antd';
import history from './history';
const FormItem = Form.Item;
const Option = Select.Option;
require ('antd/dist/antd.css');
require('./Login.css');
class Login extends Component{
    constructor(props) {
      super(props);
      this.state = {
        userName: '',
        passwd: '',
        roleid: '',
      }
    };
    check = (e) => {
      var demo = this.props.form;
      demo.validateFields((err,values) => {
          if (!err) {
            var userName = this.state.userName;
            // var passwd = this.state.passwd;
            
            if(values.roleid === "管理员"){
              $.ajax({
                  url: 'http://localhost:8008/user/'+userName,
                  dataType: 'json',
                  method: 'GET',
                  success: function(data) {
                    if(data.passwd == values.passwd){
                        if(data.roleid == "管理员"){
                            message.success("欢迎您！");
                            history.push("/Login");
                        }else if(data.roleid != "管理员"){
                            message.error("您不是管理员！");
                        }
                    }else if(data.passwd != values.passwd){
                      message.error("您输入的密码有误!");
                    }
                  },
                  error: function(xhr) {
                    if(xhr.statusText == "parsererror"){
                      message.error("用户名不存在！");
                    }
                  }
                })
            }else if(values.roleid === "用户"){
                  $.ajax({
                    url: 'http://localhost:8008/user/'+userName,
                    dataType: 'json',
                    method: 'GET',
                    success: function(data) {
                      if(data.passwd == values.passwd){
                          if(data.roleid == "用户"){
                              message.success("欢迎您！"+values.userName);
                              history.push("/StudentPage");
                          }else if(data.roleid == "管理员"){
                              message.success("欢迎您！管理员"+values.userName);
                              history.push("/StudentPage");
                          }
                      }else if(data.passwd != values.passwd){
                        message.error("您输入的密码有误!");
                      }
                    },
                    error: function(xhr) {
                      if(xhr.statusText == "parsererror"){
                        message.error("用户名不存在！");
                      }
                    }
                  })
              }
          }
        },
      );
    }
    componentDidMount(){

    }


    handleUsername=(e)=>{
      this.state.userName=e.target.value;
      this.setState();
    }

    handlePassword=(e)=>{
      this.state.passwd=e.target.value;
      this.setState();
    }
    render(){
      const { getFieldDecorator } = this.props.form;
        return(
          <div className="style">
                <CanvasDotePage/>
          
            <div className="Login">
              <Form onSubmit={this.handleSubmit} className="login-form">
                  <FormItem>
                    {getFieldDecorator('userName', {
                      rules: [{ required: true, message: '请输入用户名!' }],
                    })(
                      <Input prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder="用户名" onChange={this.handleUsername}  value={this.state.userName} autoComplete="off" />
                    )}
                  </FormItem>

                  <FormItem>
                    {getFieldDecorator('passwd', {
                      rules: [{ required: true, message: '请输入密码!' }],
                    })(
                      <Input prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />} type="password" placeholder="密码" onChange={this.handlePassword}  value={this.state.passwd}/>
                    )}
                  </FormItem>
                  <FormItem>
                  {getFieldDecorator('roleid', {
                    rules: [{ required: true, message: '请选择身份!' }],
                  })(
                    <Select placeholder="请选择登录身份" style={{ width: 300 }} >
                      <Option value="用户">个人用户</Option>
                      <Option value="管理员">管理员</Option>
                    </Select>
                     )}
                  </FormItem>
                    
                <FormItem>
                    {getFieldDecorator('remember', {
                      valuePropName: 'checked',
                      initialValue: true,
                    })(
                      <Checkbox><span>记住密码</span></Checkbox>
                    )}
                    <Link to="/">
                    <a className="login-form-forgot" href="http://">忘记密码</a>
                    </Link>
                </FormItem>

                <FormItem>
                    <Button type="primary" htmlType="submit" className="login-form-button" onClick={this.check}>
                      登录
                    </Button>
                    <Link to="/Register">
                        <Button type="primary" htmlType="submit" className="login-form-button2" >
                          注册
                        </Button>
                    </Link>
              </FormItem>
            </Form>
          </div>
        </div>
        )
    }
};


const WrappedNormalLoginForm = Form.create()(Login);
export default WrappedNormalLoginForm;
